<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style id="sheet">#removed { background-color: red; }</style>
<style>
@font-face {
    font-family: dummy;
    src: local(dummy);
}

.green {
    font-family: sans-serif;
    background-color: green;
}
</style>
<div id="removed" class="green">
    This text should have a green background.
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
description("Remove a stylesheet not affecting layout.");

var red = "rgb(255, 0, 0)";
var green = "rgb(0, 128, 0)";

shouldBe("getComputedStyle(removed).backgroundColor", "red");
document.body.offsetTop; // force layout

sheet.parentNode.removeChild(sheet);

if (window.internals) {
    var recalcCount = internals.updateStyleAndReturnAffectedElementCount();
    var layoutCount = internals.needsLayoutCount();
    shouldBe("recalcCount", "1");
    shouldBe("layoutCount", "0");
}

shouldBe("getComputedStyle(removed).backgroundColor", "green");
</script>
